import React, { Component } from 'react'
import DatePicker from 'react-mobile-datepicker'
import { NavBar, Item, Icon, Button, Input, FlatList } from 'components'
import moment from 'moment'
import './MyBill.less'
import { post, NotBean } from '../../../../utils'
import { formatPriceStr } from '../../methods'

export default class MyBill extends Component<any, any> {

    public state = {
        isScreen: false,
        screenIndex: 0,
        isShowSelectTimeBar: false,
        isScorll: true,
        btnIndex: 1,
        showStime: false,
        showEtime: false,
        stimeMax: moment().toDate(),
        etimeMax: moment().toDate(),
        stimeMin: moment().toDate(),
        etimeMin: moment().toDate(),
        time: {
            stime: moment().subtract(1, 'months').toDate(),
            etime: moment().toDate(),
        },
        type: '',
        searchRange: 5,
    }
    public node: any
    public index: number = 1
    public screenItem = [
        {
            title: '全部'
        },
        {
            title: '购物消费'
        },
        {
            title: '提现'
        },
        {
            title: '充值'
        },
        {
            title: '余额支付'
        }
    ]
    public componentDidMount () {
        this.getMonthCount()
        this.setState({
            etimeMax: moment().toDate(),
            etimeMin: moment().subtract(this.state.searchRange, 'y').toDate(),
            stimeMax: moment().toDate(),
            stimeMin: moment().subtract(this.state.searchRange, 'y').toDate(),
        })
    }

    public render (): JSX.Element {
        const { isScreen, screenIndex, isShowSelectTimeBar, btnIndex, isScorll, time, stimeMax, stimeMin, etimeMax, etimeMin, showEtime, showStime, type } = this.state
        const { userBill } = this.props
        const { userBlanceBillCount } = this.props
        return (
            <div className={`myBill ${(isScorll) ? '' : 'myBill_isScroll'}`}>
                <NavBar title={<div style={{fontSize: '0.97rem', color: '#222'}}>余额明细</div>} fixed={true} />
                <div className="myBill_screenBar">
                    <Item 
                        className="myBill_screenBar_item"
                        title={<div 
                            onClick={this.handleScreen}
                            className={`myBill_screenBar_item_title ${(isScreen) ? 'myBill_screenBar_item_title_active' : ''}`}
                        >
                            <span>筛选</span><Icon type="triangle_bottom"/>
                        </div>} 
                    />
                    {
                        (isScreen)
                        ? <div className="myBill_screenBar_content">
                            <div className="myBill_screenBar_content_selectBar">
                                {
                                    this.screenItem.map((item: any, index: number) => {
                                        return (
                                            <span 
                                                onClick={() => {this.handleChangeScreen(index)}}
                                                className={`myBill_screenBar_content_selectBar_item ${(screenIndex === index) ? 'myBill_screenBar_content_selectBar_item_active' : ''}`}
                                                key={index}
                                            >{item.title}
                                            </span>
                                        )
                                    })
                                }
                            </div>
                            <div onClick={this.handleScreen} className="myBill_screenBar_content_selectFilter" />
                        </div>
                        : null
                    }
                </div>
                {
                    isShowSelectTimeBar && 
                    <div className="myBill_selectTimeBarModal">
                        <div className="myBill_selectTimeBarModal_btnWrap">
                            <Button 
                                onClick={() => {this.handleBtnIndex(1)}}
                                className={`myBill_selectTimeBarModal_btnWrap_btn ${(btnIndex === 1) ? 'myBill_selectTimeBarModal_btnWrap_active' : ''}`}
                            >近一周
                            </Button>
                            <Button 
                                onClick={() => {this.handleBtnIndex(2)}}                                
                                className={`myBill_selectTimeBarModal_btnWrap_btn ${(btnIndex === 2) ? 'myBill_selectTimeBarModal_btnWrap_active' : ''}`}
                            >近一月
                            </Button>
                            <Button 
                                onClick={() => {this.handleBtnIndex(3)}}                                
                                className={`myBill_selectTimeBarModal_btnWrap_btn ${(btnIndex === 3) ? 'myBill_selectTimeBarModal_btnWrap_active' : ''}`}
                            >近三月
                            </Button>
                        </div>
                        <div className="myBill_selectTimeBarModal_timeBar">
                            <div className="myBill_selectTimeBarModal_timeBar_title">自定义时间查询</div>
                            <div className="myBill_selectTimeBarModal_timeBar_content">
                                <div>
                                    <Icon type="calendar" />
                                    <Input readOnly={true} onClick={() => {this.handleShowTime('showStime')}} type="text" placeholder={moment(time.stime).format('YYYY-MM-DD')} />
                                </div>
                                <div>
                                    <Icon type="arrow_long_right" />
                                </div>
                                <div>
                                    <Icon type="calendar" />
                                    <Input type="text" readOnly={true} onClick={() => {this.handleShowTime('showEtime')}}  placeholder={moment(time.etime).format('YYYY-MM-DD')} />
                                </div>
                            </div>
                            <div className="myBill_selectTimeBarModal_timeBar_btn">
                                <Button onClick={this.handleSearch} className="myBill_selectTimeBarModal_timeBar_btn_item">查询</Button>
                            </div>
                            <p className="myBill_selectTimeBarModal_timeBar_text">
                                温馨提示：查询跨度不超过一年
                            </p>
                        </div>
                        <div className="myBill_selectTimeBarModal_timeBar_filter" onClick={this.hideSelectTimeBar}/>
                    </div>
                }
                <div className="myBill_selectTimeBar">
                    <Item 
                        className="myBill_selectTimeBar_item" 
                        title={<div className="myBill_selectTimeBar_item_title">
                                <div>本月</div>
                                <div>
                                    <span className="DINPro">支出 ¥{userBlanceBillCount.xiao && formatPriceStr(userBlanceBillCount.xiao.toString())}</span>
                                    <span className="DINPro">收入 ¥{userBlanceBillCount.shou && formatPriceStr(userBlanceBillCount.shou.toString())}</span>
                                </div>
                            </div>} 
                        value={<Icon className="myBill_selectTimeBar_item_icon" onClick={this.showSelectTimeBar} type="calendar" />} 
                    />
                </div>
                <div className="myBill_record">
                    <FlatList 
                        data={userBill}
                        ref={(ref) => {this.node = ref}}
                        onRefresh={this.getData.bind(this, type, time)} 
                        ListEmptyComponent={NotBean}
                        renderItem={(item: any, index: number) => {
                            return (
                                <Item 
                                    key={index}
                                    className="myBill_record_item"
                                    title={<div className="myBill_record_item_title">
                                        <div>{item.title}</div>
                                        <div>余额：{item.after_price}</div>
                                    </div>} 
                                    value={<div className="myBill_record_item_value">
                                        <div>{item.create_time}</div>
                                        <div>{item.plus + item.price}</div>
                                    </div>} 
                                />
                            )
                        }}
                    />
                </div>
                <DatePicker theme="ios" value={time.stime} max={stimeMax} min={stimeMin} isOpen={showStime} onSelect={this.handleSelectTime.bind(this, 1)}  onCancel={() => {this.handleHideTime('showStime')}} />
                <DatePicker theme="ios" value={time.etime} max={etimeMax} min={etimeMin} isOpen={showEtime} onSelect={this.handleSelectTime.bind(this, 2)} onCancel={() => {this.handleHideTime('showEtime')}} />
            </div>
        )
    }
    private getMonthCount = () => {
        const { userInfo, SET_USER_RETURN_BILL_COUNT } = this.props
        post('usersapi/userMoneyLogCount', {
            userId: userInfo.id,
            stime: moment().subtract(1, 'months').format('YYYY-MM-DD'),
            etime: moment(new Date()).format('YYYY-MM-DD'),
        }).then((data: any) => {
            SET_USER_RETURN_BILL_COUNT(data)
        })
    }
    private getData = (type: any, time: any = {}) => {
        const { userInfo, SET_USER_RETURN_BILL, userBill } = this.props
        post('usersapi/userMoneyLogList', {
            page: this.index,
            userId: userInfo.id,
            title: type,
            stime: moment(time.stime).format('YYYY-MM-DD'),
            etime: moment(time.etime).format('YYYY-MM-DD'),
        }).then((data: any) => {
            if (this.index === 1) {
                SET_USER_RETURN_BILL(data.data)
            }  else {
                if (data.data.length) {
                    SET_USER_RETURN_BILL(userBill.concat(data.data))
                    this.node.finishLoad()
                }
            }
            this.index++
        })
    }

    private handleSearch = () => {
        this.index = 1
        const { time } = this.state
        this.node.finishLoad()
        this.getData(this.state.type, time)
    }
    private handleBtnIndex = (i: number) => {
        this.index = 1
        let time = {
            stime:  moment().toDate(),
            etime: moment().toDate()
        }
        switch (i) {
            case 1: 
            time.stime = moment().subtract(7, 'days').toDate(); break
            case 2: 
            time.stime = moment().subtract(1, 'months').toDate(); break
            case 3: 
            time.stime = moment().subtract(3, 'months').toDate(); break
            default: break
        }
        this.setState({btnIndex: i, time})
        this.node.finishLoad()
        this.getData(this.state.type, time)
    }
    private handleSelectTime = (type: any, val: any) => {
        const time = Object.assign({}, this.state.time)
        const { searchRange } = this.state
        let eMax: any
        let eMin: any
        let sMin: any
        let sMax: any
        const dataRangeMin = moment().subtract(searchRange, 'y').toDate()
        const dataRangeMax = moment().toDate()
        if (type === 1) {
            time.stime = val
            if (moment(dataRangeMin).year() === moment(val).year()) {
                eMin = dataRangeMin
                eMax = moment(val).add(1, 'y').toDate()
            } else if (moment(dataRangeMax).year() === moment(val).year()) {
                eMax = dataRangeMax
                eMin = moment(val).subtract(1, 'y').toDate()
            } else {
                eMax = moment(val).add(1, 'y').toDate()
                eMin = moment(val).subtract(1, 'y').toDate()
            }
            this.setState({
                time,
                showStime: false,
                etimeMax: eMax,
                etimeMin: eMin,
            })
            return
        }
        time.etime = val
        if (moment(dataRangeMin).year() === moment(val).year()) {
            sMin = dataRangeMin
            sMax = moment(val).add(1, 'y').toDate()
        } else if (moment(dataRangeMax).year() === moment(val).year()) {
            sMax = dataRangeMax
            sMin = moment(val).subtract(1, 'y').toDate()
        } else {
            sMax = moment(val).add(1, 'y').toDate()
            sMin = moment(val).subtract(1, 'y').toDate()
        }
        this.setState({
            time,
            showEtime: false,
            stimeMax: sMax,
            stimeMin: sMin,
        })
    }
    private handleShowTime = (key: string) => {
        this.setState({
            [key]: true
        })
    }
    private handleHideTime = (key: string) => {
        this.setState({
            [key]: false
        })
    }
    private hideSelectTimeBar = () => {
        this.setState({
            isShowSelectTimeBar: false,
            isScorll: true
        })
    }
    private showSelectTimeBar = () => {
        this.setState({
            isShowSelectTimeBar: true,
            isScorll: false
        })
    }
    private handleChangeScreen = (index: number) => {
        let title: string = ''
        this.index = 1
        switch (index) {
            case 0: 
            title = ''; break
            case 1: 
            title = '购物消费'; break
            case 2: 
            title = '提现'; break
            case 3: 
            title = '充值'; break
            default: break
        }
        let obj = {
            stime: moment().subtract(1, 'months').toDate(),
            etime: moment().toDate(),
        }
        this.setState({
            screenIndex: index,
            type: title,
            time: obj,
        })
        this.node.finishLoad()
        this.getData(title, obj)
    }
    private handleScreen = () => {
        this.setState({
            isScreen: !this.state.isScreen,
            isScorll: !this.state.isScorll,
        })
    }
}